import React, { Component } from "react";

class App extends Component {
  state = {
    // count: 1,
    arr: [1, 2, 3],
  };

  increment = () => {
    // this.state.count++;

    this.state.arr.push(4);
    // arr的地址没有发生改变，react不知道我们做了改变，实际上值已经改变了
    this.setState({});
    // setState有响应式,原理是里面的对象会和state对象合并
  };

  render() {
    return (
      <>
        <h3>setState补充</h3>
        {/* <p>{this.state.count}</p> */}
        <button onClick={this.increment}>count++</button>

        <ul>
          {this.state.arr.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
